<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>

        body{
            background-color: #f2f2f2;

        }

        .el-header li{
            font-size: 18px;
            float: right;
            color: white;
            margin-top: 0;

        }

        .el-main {
            /*background-color: #f2f2f2;*/
            /*height: 300px;*/
        }

        .el-aside {
            background-color: purple
        }

        /*ul{*/
        /*    list-style-type: none;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    overflow: hidden;*/
        /*}*/

        /*li{*/
        /*    float: left;*/
        /*    margin-right: 5px;*/
        /*}*/

        /*a{*/
        /*    display: block;*/
        /*    text-decoration: none;*/
        /*    text-align: center;*/
        /*    font-size: 16px;*/

        /*    line-height: 20px;*/
        /*    padding-left: 0px;*/
        /*    padding-top: 0px;*/
        /*}*/

        a{
            text-decoration: none;
            color: #000;
            text-align: center;
            /*display: block;*/
        }

        li{
            list-style: none;
            margin-right: 40px;
            font-size: 14px;
        }

        .el-card__body{
             padding:0px;
            font-size: 16px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>

        <el-header height="60px" style="background-color: #545c64;position:fixed;top:0;left:0;width:100%;z-index:9999">
            <div style="width: 1200px;margin: 0 auto">
                <img src="../img/zhaopai.jpg" style="vertical-align: middle" width="150" height="60">
                <span style="float:right;margin-right: 10px;">
                    <el-menu mode="horizontal" style="background-color: #545c64">
                        <el-menu-item index="1"><a href="首页.html">网站首页</a></el-menu-item>
                        <el-menu-item index="2"><a href="关于我们.html">关于我们</a></el-menu-item>
                        <el-menu-item index="3"><a href="photoPrice.html">拍摄价格</a></el-menu-item>
                        <el-menu-item index="4"><a href="作品展示.html">作品展示</a></el-menu-item>
                        <el-menu-item index="5"><a href="联系我们.html">联系我们</a></el-menu-item>
                    </el-menu>
                </span>
            </div>
        </el-header>
<!--                <span style="float:right;margin-right: 10px;">-->
<!--                <el-menu mode="horizontal" style="background-color: #545c64;">-->
<!--                    <el-menu-item index="1">网站首页</el-menu-item>-->
<!--                    <el-menu-item index="2">关于我们</el-menu-item>-->
<!--                    <el-menu-item index="3">拍摄价格</el-menu-item>-->
<!--                    <el-menu-item index="4">作品展示</el-menu-item>-->
<!--                    <el-menu-item index="5">联系我们</el-menu-item>-->
<!--                </el-menu>-->
<!--                </span>-->

<!--            <img src="photoPrice/background.jpg" width="100%" height="100%">-->
        <div style="color: black;font-size: 14px;background-color: white;margin-bottom: 10px;height: 64px">
            <div style="position: relative;top:20px;left: 350px">
                <span>你的位置</span><i class="el-icon-d-arrow-right"></i><a href=""><span><i class="el-icon-s-home"></i>网站首页</span></a><i class="el-icon-d-arrow-right"></i>
                <a href=""><span>拍摄价格</span></a><i class="el-icon-d-arrow-right"> </i><a href=""><span>拍摄价格</span></a>
            </div>
            <div style="width: 63%;position: relative;left: 350px;top:10px"><el-divider></el-divider></div>
        </div>

        <el-main style="margin: 0 auto; width: 1400px;">
                <el-row gutter="20">
                    <el-col span="4" style="text-align: center;" >
                        <el-card>
                            <ul>
                                <li><a href="photoPrice.html" title="拍摄价格"><span style="color: #1baadb;font-size: 24px;">拍摄价格</span></a></li>
                                <li><hr><a href="photoPrice1-1.html" title="儿童摄影"><span>儿童摄影</span></a></li>
                                <li><hr><a href="photoPrice1-2.html" title="家庭合影"><span>家庭合影</span></a></li>
                                <li><hr><a href="photoPrice1-3.html" title="艺术摄影"><span>艺术摄影</span></a></li>
                                <li><hr><a href="photoPrice1-4.html" title="戏装摄影"><span>戏装摄影</span></a></li>
                                <li><hr><a href="photoPrice1-5.html" title="证件摄影"><span>证件摄影</span></a></li>
                                <li><hr><a href="photoPrice1-6.html" title="经典套照"><span>经典套照</span></a></li>
                            </ul>
                        </el-card>
                    </el-col>
                    <el-col style="margin: 0 0 10px 0;" span="5" v-for="pp in photoPrice">
                        <a href="" style="text-decoration: none">
                            <el-card>
                                <img :src="pp.url" width="100%" height="100%">
                                <div style="padding: 0px">
                                    <p style="margin:10px;height: 21px;color: #1baadb; text-align: center">{{pp.title}}</p>
                                </div>

                            </el-card>
                        </a>
                    </el-col>
                </el-row>

        </el-main>

        <el-footer>
            <div style="background-color: #545c64;text-align: center;
             color: white;padding: 50px 0">
                <p>大北照相馆官方网站，为您提供照相前指导，普及照相知识，提供优质网络服务！</p>
                <p>北京大北照相有限责任公司 京ICP备15047318号-1 </p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                photoPrice: [{url: "photoPrice/儿童摄影.jpg", title: "儿童摄影"}, {url: "photoPrice/家庭合影.jpg", title: "家庭合影"},
                    {url: "photoPrice/艺术摄影.jpg", title: "艺术摄影"}, {url: "photoPrice/戏装摄影.jpg", title: "戏装摄影"},
                    {url: "photoPrice/证件摄影.jpg", title: "证件摄影"}, {url: "photoPrice/经典套照.jpg", title: "经典套照"},
                    {url: "photoPrice/婚纱摄影.jpg", title: "婚纱摄影"}, {url: "photoPrice/团体合影.jpg", title: "团体合影"},
                ],
            }
        },
        methods: {

        }
    })
</script>
</html>